Administrator 16:41:41
<template>
  <div class="content">
    <van-tree-select
      height="90vh"
      :items="categoryList"
      :active-id.sync="activeId"
      :main-active-index.sync="activeIndex"
      @click-nav="onNavSelect"
    >
      <template #content>
        <div class="right-img">
          <img
            src="https://www.pmdaniu.com/storages/127892/00f1511d349bd29e39c7ad8b6a7d5c0e-122037/images/%E5%88%86%E7%B1%BB/u1397.png"
            alt=""
          />
        </div>
        <div class="shopp-list"  >
          <ul>
            <li v-for="item in selectList" :key="item.id" @click="Onretor(item.id)">
              <img :src="item.picture" alt="">
              <p>{{ item.categoryname }}</p>
            </li>
          </ul>
        </div>
      </template>
    </van-tree-select>
    <menus />

  </div>
</template>

<script>
import menus from "../../Layout/menu";
import { requestSidelist, RequestProductList } from "@/api/side";
export default {
  data() {
    return {
      selectList: [], //右侧显示列表数据
      // 分类数据,左侧显示列表数据
      categoryList: [],
      // 所有商品数据
      productList: [],

      activeId: 5,
      activeIndex: 2,
    };
  },
  components: {
    menus,
  },
  async created() {
    let res = await requestSidelist();
    let data = res.data;
    let { resultCode, resultInfo } = data;
    if (resultCode == 1) {
      this.categoryList = resultInfo.list.map((item) => {
        return { id: item.id, text: item.name };
      });
    }

    // 所有商品列表
    let res1 = await RequestProductList(1, 30);
    let data1 = res1.data;
    let resultCode1 = data1.resultCode;
    if (resultCode1 == 1) {
      this.productList = data1.resultInfo.list;
    }
    this.onNavSelect(2);
  },
  methods: {
    onNavSelect(index) {
      let id = this.categoryList[index].id;
      this.selectList = this.productList.filter(
        (item) => item.categoryId == id
      );
    },
    Onretor(id){
 this.$router.push({path:`detail/${id}`})
    }
 
  },
 
};
</script>

<style lang="scss" scoped>
.content {
  height: 500px;
}
.right-img {
  margin-bottom: 10px;
}
.right-img img {
  width: 100%;
  padding: 5px;
  margin-right: 5px;
}
.shopp-list {
  width: 100%;
  height: 110px;
  

  ul {
    display: flex;
    // justify-content: space-evenly;
    flex-wrap: wrap;

    li {
      width: 31%;
      height: 100px;
       text-align: left;
       margin-bottom: 20px;
       margin-right:5px ;

      img {
        width: 100%;
        height: 90px;
     
      }
      p{
        color: rgb(128, 125, 125);
      }
    }
  }
}

</style>
